<template>
  <div>
    <p>A 节点</p>
    <button @click="getDRef">获取 D Ref</button>
    <hr />
    <children-b />
    <children-C />
  </div>
</template>

<script>
import ChildrenB from "./ChildrenB.vue";
import ChildrenC from "./ChildrenC.vue";

export default {
  components: { ChildrenB, ChildrenC },
  provide() {
    return {
      // 主动通知 缓存传递过来的 ref
      setChildrenRef: (name, ref) => {
        this[name] = ref;
      },
      // 主动获取 获取此 name 的 ref
      getChildrenRef: (name) => {
        return this[name];
      },
      getRef: () => {
        return this;
      },
    };
  },
  data() {
    return {
      color: "blue",
    };
  },
  methods: {
    // 获取子孙级 Ref
    getDRef() {
      console.log(this.childrenD);
    },
  },
};
</script>

<style scoped>
div {
  background-color: indianred;
  border-radius: 4px;
  padding: 10px;
}
</style>
